<template>
  <view class="hospital-detail">
    <view class="navbar">
      <uni-nav-bar @clickLeft="goback" leftIcon="left" fixed="true" border="false" color="#FFF" statusBar="true"
        backgroundColor="#22b9a3" title="医院详情" />
    </view>
    <view class="container">
      <view class="top">
        <view class="header">
          <view class="logo">
            <image :src="hospital.icon" mode="aspectFill"></image>
          </view>
          <view class="name">
            <view>
              <text>{{hospital.name}}</text>
            </view>
            <view class="tag">
              <uni-tag size="default" :text="tag" v-for="(tag, tagIndex) in hospital.label.split(',')" :key="tagIndex"
                type="success" inverted="true" circle="true" />
            </view>
          </view>
        </view>
        <view class="second-line">
          <view class="section">
            <uni-icons type="star" size="25" color="gray"></uni-icons>
            <text>&nbsp;&nbsp;重点科室&nbsp;:</text>
            <text class="des">&nbsp;&nbsp;{{hospital.department}}</text>
          </view>
          <view class="address">
            <uni-icons type="location" size="25" color="gray"></uni-icons>
            <text>&nbsp;&nbsp;医院地址&nbsp;:</text>
            <text class="des">&nbsp;&nbsp;{{hospital.address}}</text>
          </view>

        </view>
        <view class="footer">
          <view>
            <text class="title">等级</text>
            <text>三级甲等</text>
          </view>
          <view>
            <text class="title">省份</text>
            <text>{{hospital.province}}</text>
          </view>
          <view>
            <text class="title">城市</text>
            <text>{{hospital.city}}</text>
          </view>
        </view>
      </view>
      <view class="bottom">
        <uni-section title="医院介绍" type="line" titleFontSize="35rpx">
          <uni-card :cover="hospital.cover" :border="false" margin="0px">
            <!-- <image slot='cover' style="width: 100%;" :src="cover"></image> -->
            <text class="uni-body">{{hospital.intro}}</text>
          </uni-card>
        </uni-section>
      </view>
    </view>
    <view class="cart">
      <uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @buttonClick="gotoService" />
    </view>
  </view>
</template>

<script setup>
  import * as http from '@/utils/http'
  import {
    useParamStore
  } from '@/stores/query-param';
  import {
    onLoad
  } from '@dcloudio/uni-app'
  import {
    ref
  } from 'vue';

  const hospital = ref({})
  onLoad(async (option) => {
    const hosiptalId = option.id
    const result = await http.getRequest("/peizhen/hospital/get", {
      id: hosiptalId
    })
    if (result.code == 0) {
      hospital.value = result.data
    } else {
      uni.showToast({
        title: '获取医院信息失败',
        icon: 'error',
        duration: 1000
      })
    }
  })
  //导航返回
  function goback() {
    uni.navigateBack()
  }

  const options = ref([{
    icon: 'headphones',
    text: '客服'
  }])
  const buttonGroup = ref([{
    text: '自助下单',
    backgroundColor: '#2abbaf',
    color: '#fff'
  }])
  
  function gotoService(e){
    useParamStore().setChoiceHospital(hospital.value)
    uni.switchTab({
      url:"/pages/project/project"
    })
  }
</script>

<style lang="scss" scoped>
  .navbar ::v-deep .uni-nav-bar-text {
    font-size: $uni-font-size-title !important;
    font-family: "siyuan";
  }

  .hospital-detail {
    background-color: #f8f8f8;
    padding-bottom: 100rpx;

    .container {
      .top {
        background-color: #fff;
        margin: 25rpx;
        padding-top: 30rpx;
        padding-left: 30rpx;
        border-radius: 20rpx;
        padding-bottom: 40rpx;

        .header {
          display: flex;

          .logo {
            image {
              width: 132rpx;
              height: 132rpx;
              border-radius: 66rpx;
            }
          }

          .name {
            margin-left: 60rpx;

            text {
              font-size: 35rpx;
              font-family: "黑体", "SimHei";
            }

            .tag {
              margin-top: 50rpx;

              uni-tag {
                margin-right: 20rpx;
              }
            }
          }
        }
      }

      .second-line {
        padding-top: 30rpx;
        padding-bottom: 30rpx;
        border-bottom: solid 4rpx gainsboro;

        .address {
          color: gray;
          height: 60rpx;
          text {
            line-height: 60rpx;
          }
          .des {
            color: #000000;
          }
        }
        .section {
          color: gray;
          height: 60rpx;
          text {
            line-height: 60rpx;
          }
          .des {
            color: #000000;
          }
        }

      }

      .footer {
        margin-top: 30rpx;
        display: flex;
        justify-content: space-between;
        text-align: center;
        overflow: hidden;

        view {
          width: 33%;
          display: flex;
          flex-direction: column;

          .title {
            color: gray;
            padding-bottom: 20rpx;
          }
        }
      }
    }
  }

  .bottom {
    background-color: #fff;
    margin: 25rpx;
    padding-top: 30rpx;
    padding-left: 30rpx;
    border-radius: 20rpx;

    .uni-body {
      font-family: "黑体", "SimHei", "Arial Unicode MS", "Microsoft YaHei", sans-serif;
      color: #000000;
      font-size: 28rpx;
      letter-spacing: 1rpx;
    }
  }


  .cart {
    position: fixed;
    bottom: 50rpx;
    width: 100%;
  }
</style>